<template>
			<!--选择参加活动的商品-->
			<div class="ct-list">
				<div class="title">选择参加活动的商品</div>
				<div class="search-list">
					<!--按关键字分类(商品描述，起始日期，价格区间)-->
					<div class="search-list-item">
						<div class="keyword-tag" style="color: #f60;">是否为点分商品</div>
						<el-select  size="small" v-model="params.is_fen" @change="getDianfenGoods">
							<el-option label="一般商品" :value="0"></el-option>
							<el-option label="点分商品" :value="1"></el-option>
						</el-select>
					</div>
					<!--按商品类型来进行分类-->
					<div class="goods-classify">
						<div class="classify-tag">商品分类</div>
						<s-cascader @getclassify="handleClassify"></s-cascader>
					</div>
					<!--关键字和价格区间搜索-->
					<div class="goods-keyword search-list-item">
						<div class="keyword-tag">关键字</div>
						<el-input placeholder="商品描述" size="small" v-model="params.commodity_name"></el-input>
					</div>
					<div class="goods-search-btn">
						<el-button size="small" type="success" icon="el-icon-search" @click="searchGoods">搜索</el-button>
					</div>
					<!--已添加和批量添加-->
					<div class="operate">
						<el-badge :value="addNumber" style="margin-right: 25px;" >
							<el-button size="small" type="primary" @click="showPriceModel=true">已添加</el-button>
						</el-badge>
						<el-button size="small" type="primary"  @click="addMultGoods">批量添加</el-button>
						<el-button size="small" type="danger"  @click="removeMultGoods">批量移除</el-button>
					</div>
				</div>
				<!--活动商品table-->
				<div class="content-table" v-loading="loading">
					<el-table :data="activeGoods" strip @selection-change="handleSelect" height="550">
						<el-table-column type="selection"></el-table-column>
						<el-table-column label="商品编号" prop="commodity_no" ></el-table-column>
						<el-table-column label="商品描述" prop="commodity_name" width="350">
							<template slot-scope="scope">
								<div class="goods-name">
									<img :src="scope.row.mainimg.url" alt="" v-if="scope.row.mainimg"/>
									<span class="goods-name-des">{{scope.row.commodity_name}}</span>
								</div>
							</template>
						</el-table-column>
						<el-table-column label="吊牌价格" prop="price.price">
							<template slot-scope="scope">
								<span v-if="scope.row.price">{{scope.row.price.price}}元</span>
							</template>
						</el-table-column>
						<el-table-column label="卖价" prop="price.price">
							<template slot-scope="scope">
								<span v-if="scope.row.price">{{scope.row.price.sale_price}}元</span>
							</template>
						</el-table-column>
						<el-table-column label="库存" prop="stocks"></el-table-column>
						<el-table-column label="商品状态">
							<template slot-scope="scope">
								<!--__status为自定义属性，用于判断是否已经添加-->
								<el-tag type="danger" v-if="state[scope.row.commodity_id] && state[scope.row.commodity_id].status!==0">已添加</el-tag>
								<el-tag type="success" v-else>等待添加</el-tag>
							</template>
						</el-table-column>
						<el-table-column label="操作" align="center" width="250">
							<template slot-scope="scope">
								<el-button size="mini" type="primary" @click="addGoods(scope.row)">添加</el-button>
								<el-button size="mini" type="danger" @click="removeGoods(scope.row)">移除</el-button>
								<el-button size="mini" @click="showGoodsDetail(scope.row.commodity_id)">详情</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<el-pagination 
					@current-change="handleCurrentChange"
					layout="prev, pager, next, total" 
					:total="totalNum" class="fr">
				</el-pagination>
			</div>
</template>

<script>
	export default {
		props: ["facilities"],
		data() {
			return {
				
			}
		},
		methods: {
			close() {
				this.$parent.isShow = false;
			},
			test() {
				
			}
		},
		computed: {
			show() {
				return this.$parent.isShow;
			}
		}
	}
</script>

<style scoped>
	/*模态框*/
	
	.model {
		width: 500px;
		height: 400px;
		border: 1px solid #f6f6f6;
		background: #fff;
		margin: 0 auto;
		position: absolute;
		top: calc( (100% - 400px)/2);
		left: calc( (100% - 500px)/2);
		z-index: 999;
		transition: all 1s;
		box-shadow: 1px 1px 50px rgba(0, 0, 0, .3);
		border-radius: 5px;
		animation: eject .5s;
		/*display: none;*/
	}
	
	@keyframes eject {
		0% {
			opacity: 0;
			transform: scale(.3);
		}
		100% {
			opacity: 1;
			transform: scale(1);
		}
	}
	.aaa {
		max-height: 200px;
		overflow-y: auto;
	}
	.model>h2 {
		vertical-align: middle;
		padding: 1rem 0 1rem 2rem;
		background: #f6f6f6;
		font-weight: normal;
	}
	
	.model .close {
		float: right;
		margin-right: 1rem;
		cursor: pointer;
		font-size: 1.5rem;
	}
	
	.model .close:hover {
		color: #666;
	}
	
	.model>div {
		padding: 1rem;
	}
	/*详细设施查看*/
	
	.model_facility {
		padding: 1rem;
		min-height: 100px;
		overflow-y: auto;
	}
	
	.model_facility li {
		display: inline-block;
		width: 25%;
		margin-bottom: .3rem;
		margin-right: 5%;
	}
	
	.model_facility li i {
		margin-right: 3px;
	}
	
	.model_facility .disabled {
		cursor: not-allowed;
		color: #ccc;
	}
</style>